<template>

  <div class="block">
    <el-timeline>
      <el-timeline-item :timestamp="task.createTime" placement="top">
        <el-card>
          <h4>您上传了一个问题信息</h4>
        </el-card>
      </el-timeline-item>
      <el-timeline-item :timestamp="task.createTime" placement="top" :color="colorList[0]">
        <el-card>
          <h4>成功将问题上报！请耐心等待反馈</h4>
          <br>
          <p>感谢您为空气质量做出的帮助</p>
        </el-card>
      </el-timeline-item>

      <el-timeline-item
          placement="top"
          :color="colorList[1]"
          v-if="progressNum >= 1"
      >
        <el-card>
          <h4>已分配任务</h4>
          <br>
          <p>任务负责人：{{ task.applicant }}</p>
          <p>联系方式：{{ task.chargePhone }}</p>
        </el-card>
      </el-timeline-item>
      <el-timeline-item
          placement="top"
          :timestamp="task.nowTime"
          :color="colorList[2]"
          v-if = "progressNum == 2"
      >
        <el-card>
          <h4>实地检测已完成</h4>
          <br>
          <p>CO:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="font-weight: bold">{{ results.co }}</span> µg/m³</p>
          <p>SO2:&nbsp;&nbsp;&nbsp;&nbsp;<span style="font-weight: bold">{{ results.so2 }}</span> µg/m³</p>
          <p>PM2.5:&nbsp;<span style="font-weight: bold">{{ results.pm25 }}</span > µg/m³</p>
          <p>AQI:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="font-weight: bold">{{ results.aqi }}</span> µg/m³</p>
        </el-card>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script>
import {mapState} from "vuex";

export default {
  data() {
    return {
      //为2已完成，1已分配，0 用户刚提交
      progressNum: '',
      task: {},
      results: {},
      colorList:[null, null, null]
    }

  },
  mounted() {
    this.showDetail()
  },
  methods: {
    // 根据id获取任务追踪详情
    async showDetail() {
      await this.$store.dispatch("task/getIdTack", this.$route.params.id);

      this.progressNum = this.idTask.progressNum
      this.task = this.idTask
      this.colorList[this.progressNum] = '#0bbd87'

      console.log(this.idTask)
      if (this.progressNum === 2) {
        this.results.co = this.idTask.results.co
        this.results.so2 = this.idTask.results.so2
        this.results.pm25 = this.idTask.results.pm25
        this.results.aqi = this.idTask.results.aqi
      }
    }
  },
  computed: {
    ...mapState("task", ["idTask"])
  }
};
</script>

<style lang="less" scoped>

</style>